<template>
  <div class="user">
    <div class="mask"></div>
    <Navbar bg="transparent" color="var(--background-from)" />
    <div class="user__container">
      <div class="user__message">
        <div class="avatar">
          <img src="@/assets/image/user.png" alt="" />
        </div>
        <div class="content">
          <h3 class="name">{{ username }}</h3>
          <div class="digest">I PRAY FOR YOU</div>
        </div>
      </div>
      <ul class="user__log">
        <li @click="sendData('order')">
          <span>订单</span>
          <span>{{ orderList?.length }}</span>
        </li>
        <li @click="sendData('browse')">
          <span>浏览</span>
          <span>{{ browseList?.length }}</span>
        </li>
        <li @click="sendData('collect')">
          <span>收藏</span>
          <span>{{ collectList?.length }}</span>
        </li>
      </ul>
      <div class="user__control">
        <van-cell title-style="font-size:14rem" to="userInfo" title="个人信息" is-link />
        <van-cell title-style="font-size:14rem" to="address" title="收货地址" is-link />
        <van-cell title-style="font-size:14rem" center title="夜间模式">
          <template #right-icon>
            <van-switch active-color="#ffcd41" size="14rem" v-model="checked" />
          </template>
        </van-cell>
        <van-cell title="退出" @click="userExit" title-style="font-size:14rem" is-link />
      </div>
    </div>
    <teleport to="body">
      <Theme :checked="checked" :themeShow="themeShow" />
    </teleport>
    <SlotPopup v-model="popupShow" :type="type" :popupList="popupList" />
  </div>
</template>

<script setup lang="ts">
import Navbar from "@/components/Navbar.vue";
import Theme from "@/components/Theme.vue";
import { getUserRecords, getLogList } from "@/api";
import { ref, watch } from "vue";
import { themeChange } from "@/utils/themeUtils";
import { useRouter } from "vue-router";
import { GoodsItem } from "../home/index.vue";
import { showConfirmDialog, showDialog } from "vant";
import "vant/es/dialog/style";
import SlotPopup from "./components/SlotPopup.vue";
const type = ref<string>("browse");
const checked = ref<boolean>(false);
const themeShow = ref<boolean>(false);
const popupShow = ref<boolean>(false);

const popupList = ref<unknown[]>([]);
const router = useRouter();
const userInfo = JSON.parse(localStorage.getItem("userInfo"));
const username = ref<string>(localStorage.getItem("token") ?? "请先登录");
(function () {
  try {
    checked.value = JSON.parse(localStorage.getItem("theme")).theme === "dark";
  } catch (error) {
    checked.value = false;
  }
})();
function changeTheme(val: string) {
  themeChange(val);
}
watch(checked, (newValue) => {
  timeout();
  if (newValue) {
    changeTheme("dark");
  } else {
    changeTheme("light");
  }
});
function timeout() {
  themeShow.value = true;
  let timer = setTimeout(() => {
    themeShow.value = false;
    clearTimeout(timer);
    timer = null;
  }, 2000);
}
const userExit = () => {
  showConfirmDialog({
    title: "提示",
    message: "是否跳转注册页面",
    confirmButtonColor: "#ffcd41",
  }).then(() => {
    localStorage.removeItem("token");
    showDialog({ title: "退出登录成功", confirmButtonColor: "#ffcd41" }).then(
      () => {
        router.push("/login");
      }
    );
  });
};
const browseList = ref<GoodsItem & { uid: number; length: number }[]>(null);
const collectList = ref<GoodsItem & { uid: number; length: number }[]>(null);
const orderList =
  ref<{ gids: string; id: number; time: string; uid: number }[]>(null);
async function initData() {
  const [{ data }, { data: data2 }, { data: data3 }] = (await Promise.all([
    getUserRecords(userInfo.id, "browse"),
    getLogList(userInfo.id),
    getUserRecords(userInfo.id, "collect"),
  ])) as any;
  browseList.value = data;
  orderList.value = data2;
  collectList.value = data3;
}
initData();
const sendData = (str: string) => {
  type.value = str;
  switch (str) {
    case "order":
      popupList.value = orderList.value;
      break;
    case "browse":
      popupList.value = browseList.value;
      break;
    case "collect":
      popupList.value = collectList.value;
      break;
    default:
      break;
  }
  popupShow.value = true;
};
</script>

<style lang="scss">
.user {
  .van-cell {
    background-color: var(--background-color);
    color: var(--font-color);
  }

  .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
        var(--background-from),
        var(--background-to));
    z-index: -1;
  }

  height: 100vh;

  &__control {
    margin-top: 20rem;
    width: 100%;
    background-color: white;
    border-radius: 10rem;
    overflow: hidden;
  }

  &__log {
    color: var(--font-color);
    margin-top: 24rem;
    height: 86rem;
    width: 100%;
    position: relative;
    border-radius: 20rem;
    background-color: var(--background-color);
    box-shadow: 0rem 2rem 37rem rgba(0, 0, 0, 0.034);
    @include flex($ai: center, $jc: space-around);

    li {
      span:first-child {
        font-size: 18rem;
        margin-bottom: 10rem;
      }

      span {
        font-size: 14rem;
      }

      @include flex($fd: column, $ai: center);
    }
  }

  &__container {
    padding: 0 20rem 20rem;
    box-sizing: border-box;

    .user__message {
      @include flex($ai: center);
    }

    .avatar {
      overflow: hidden;

      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }

      @include flex($ai: center, $jc: center);
      height: 54rem;
      width: 54rem;
      border-radius: 50%;
      border: rgb(255, 223, 201) 4rem solid;
      background-color: rgba($color: $color-yellow, $alpha: 0.8);
    }

    .content {
      margin-left: 10rem;
      font-size: 12rem;
      color: var(--font-color);

      h3 {
        font-size: 24rem;
        font-weight: 600;
      }

      height: 50rem;
      @include flex(column, flex-start, space-between);
    }
  }
}
</style>
